<template>
  <div>
    <el-select
      @change="goodsChange"
      multiple
      clearable
      filterable
      v-model="state.value"
    >
      <el-option
        v-for="item in state.goodsOptions"
        :key="item.goodsNo"
        :label="item.goodsNo"
        :value="item.goodsNo"
      >
        <span style="float: left">{{ item.goodsNo }}</span>
        <span
          style="
            float: right;
            color: var(--el-text-color-secondary);
            font-size: 13px;
          "
        >
          {{ item.goodsName }}
        </span>
      </el-option>
    </el-select>
  </div>
</template>
<script lang="ts" setup>
import { reactive, inject, onMounted, onBeforeUnmount } from "vue";
import { TableColumn, TableRow } from "@/utils/baTable";
import type baTableClass from "@/utils/baTable";
import useCurrentInstance from "@/utils/useCurrentInstance";

const state: {
  goodsOptions: anyObj[];
  value: string | number;
} = reactive({
  goodsOptions: [],
  value: "",
});

const { proxy } = useCurrentInstance();
const baTable = inject("baTable") as baTableClass;
const goods = inject("goods") as any;

interface Props {
  renderValue: any; // 单元格值
  renderRow: TableRow; // 当前行数据
  renderField: TableColumn; // 当前列数据
}
const props = defineProps<Props>();

proxy.eventBus.on("clearTag", () => {
  baTable.comSearch.form[props.renderField as any] = "";
  baTable.comSearch.form[props.renderField + "s"] = [];
  state.value = "";
});

const goodsChange = (value: any) => {
  // console.log("value!", value, typeof value);
  state.value = value;
  if (value == "" || value.length == 0) {
    baTable.comSearch.form[props.renderField as any] = "";
    baTable.comSearch.form[props.renderField + "s"] = [];
  } else {
    if (value.length > 1) {
      baTable.comSearch.form[props.renderField as any] = "";
      baTable.comSearch.form[props.renderField + "s"] = value;
    } else {
      baTable.comSearch.form[props.renderField as any] = value[0];
    }
  }
};

//获取物料列表数据
const getGoodsInfo = () => {
  goods
    .get({ pageSize: 999999 })
    .then((res: any) => {
      state.goodsOptions = res;
    })
    .catch((err: any) => {});
};

onMounted(() => {
  //获取物料列表数据
  getGoodsInfo();
});
onBeforeUnmount(() => {
  proxy.eventBus.off("clearTag");
});
</script>
<style lang="scss" scoped></style>
